<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <!-- 认识：css3的animation是一种通过定义关键帧和动画属性来实现元素动态效果的技术，代码简洁，交互性强
    关键帧是动画和视频制作用于定义动作或者状态变化的核心节点，他决定了动画的起始、转折和结束状态，中间帧（插帧）通过算法自动生成，形成连贯的动画效果
    使用动画：先定义动画再使用动画 -->

    <!-- 进阶：Animation的完整写法：
    animation：动画名称* + 动画时长* + 速度曲线 + 延迟时间 + 播放次数 + 播放方向 + 执行完毕状态； -->
    <style>
        * {
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }

        html,body {
            width: 100%;
            height: 200%;
        }

        .box1 {
            margin: 30px 0 0 30px;
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }

        /* 定义动画 */
        @keyframes moveCircle/* 动画名称 */ {
            from/* 起始帧也可以为0% */ {
                transform: translate(0);
            }
            to/* 结束帧（100%） */ {
                transform: translate(200px);
                border-radius: 50%;
            }
        }
        /* 使用动画 */
        .box1 {
            /* 动画属性必须写在目标元素里面 */
            animation: moveCircle 2s ease 0s infinite alternate;
        }
        .box1:hover {
            /* 鼠标经过暂停动画，鼠标离开继续动画 */
            /* 不能写在animation里面 */
            animation-play-state: paused;
        }

        .box2 {
            margin: 10px 0 0 10px;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        @keyframes move12 {
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(300px,0);
                border-radius: 20%;
            }
            50% {
                transform: translate(300px,300px);
                border-radius: 50%;
            }
            75% {
                transform: translate(0,300px);
                border-radius: 10%;
            }
        }
        .box2 {
            /* animation：动画名称* + 动画时长* + 速度曲线 + 延迟时间 + 播放次数 + 播放方向 + 执行完毕状态； */
            animation: move12 4s ease 0s infinite/* 无限循环 */ alternate/* 交替播放 */ /* backwards回到第一帧 */;
        }
        
    </style>

</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>